<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border:solid 1px black}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const c2d = cvs.getContext("2d");

  
  
  function displayMsg(c2d, x, y){
    c2d.beginPath();
    c2d.lineWidth = 10;
    c2d.lineJoin = "bevel";
    c2d.strokeRect(x, y, 150, 100);
    c2d.moveTo(x, y);
    c2d.lineTo(x+75, y+50);
    c2d.lineTo(x+150, y);
    c2d.stroke();
  }

  // c2d.clearRect(110, 110, 50, 50);

  let now = 0;
  let speed = 10;

  let t = setInterval(()=>{
    now += speed;
    // 擦除整个画布
    c2d.clearRect(0, 0, cvs.width, cvs.height);
    // 擦除之后，为了防止之前路径对之后绘制造成影响，需要使用beginPath重新开始新路径
    c2d.beginPath();
    displayMsg(c2d, now, 100);
  }, 100);

  cvs.onclick = function(){
    clearInterval(t);
  }


  
</script>
</html>